<template>
    <div class="big_box">
        <el-container>
            <el-header class="big_title">
                <h5> 
                    <img src="@/assets/未标题-1.png" alt="" style="margin-right:.1rem;">
                    统一门户平台
                </h5>
                <div class=".big_title_right">
                    <ul>
                        <li><i class="el-icon-download"></i></li>
                        <li><i class="el-icon-s-operation"></i></li>
                        <li>admin</li>
                    </ul>
                </div>
            </el-header>
            <el-container>
                <div class="nav">
                    <i class="el-icon-menu"></i>
                    <ul>
                        <li>用户管理</li>
                    </ul>
                </div>
            </el-container>
            <el-container>
                <el-main style="background-color:;height:9.12rem !important;padding:.68rem .85rem !important;display:flex;justify-content:flex-start;flex-wrap:nowrap;">
                    <div style="width:11.2rem;height:100%;">
                        <router-view></router-view>
                    </div>
                    <div style="width:8rem;height:100%;">
                        <ul ref="buoy" class="buoy">
                            <li @click="move" v-for="(item,index) in application" :key="index">
                                <router-link :to="item.path">
                                    {{item.meta.name}}
                                </router-link>
                            </li>
                            <img :style="{ left: left+'px', top: top+'px' }" src="@/assets/buoy.png" alt=""/>
                        </ul>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>

export default {
    data() {
        return {
            top: 'null',
            left: 'null',
            application:[]
        }
    },
    created() {
        this.appli()
        this.$nextTick(() => {
            this.buoy_img()
        })
        this.$router.push({path:'/menhuDemo1'})
    },
    methods: {
        buoy_img() {
            let arr = this.$refs.buoy.children
            // console.log(arr[0].offsetTop, arr[0].offsetLeft);
            this.top = arr[0].offsetTop
            this.left = arr[0].offsetLeft - 36
        },
        move(ed) {
            // console.log(ed.target.offsetTop);
            this.top = ed.target.offsetTop
            this.left = ed.target.offsetLeft-36
        },
        appli() {
            console.log(this.$router.options.routes);
            let obj ={}
                this.$router.options.routes.forEach(item => {
                if (item.name == 'userDemo') {
                    obj = item
                }
            })
            console.log(obj);
            this.application.push(obj)
            let arr = []
            this.application.forEach(item => {
                arr = item.children
            })
            this.application = arr
            console.log(this.application);
        }
    }
}
</script>
<style>
@import '@/assets/yonghupingtai/userDemo.css';
@import '@/assets/rest.css'
</style>